<script setup lang="ts">
import { RouterView } from 'vue-router'
import LyricsView from './Lyrics.vue'
import NavBarView from '@renderer/views/header/NavBar.vue'
import PlayerView from './Player.vue'
</script>

<template>
  <div class="container">
    <NavBarView />
    <div class="content">
      <RouterView v-slot="{ Component }">
        <KeepAlive :include="['Search', 'PlayList', 'Favorite']">
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </div>
    <PlayerView />
  </div>
  <LyricsView />
</template>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    padding: 24px 5vw;
    overflow: auto;
  }
}
</style>
